<template>
    
    <!-- 组件的模板 -->
    <div class="page attendance-set show-footerBtn" :style="isIphoneX?'padding-bottom: 89px;':''">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">考勤名称</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="taskObj.name" placeholder="请输入" maxLength="20">
                </div>
            </div>
        </div>
        <div class="weui-cells">
            <a class="weui-cell_access block" href="javascript:;" @click="addGroup">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>考勤小组<span class="tip">(新增人员自动加入)</span></p>
                    </div>
                    <div class="weui-cell__ft" v-if="taskObj.participant_group.length">{{taskObj.participant_group.length}}个小组</div>
                    <div class="weui-cell__ft" v-else></div>
                </div>
                <div class="add-team">
                    <template v-if="taskObj.participant_group_name.length">
                        <span class="team" v-for="item in taskObj.participant_group_name">{{item}}</span>
                    </template>
                    <span class="button"></span>
                </div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;" @click="addMember">
                <div class="weui-cell__bd">
                    <p>其他考勤人员</p>
                </div>
                <div class="weui-cell__ft" v-if="taskObj.participant_user.length">{{taskObj.participant_user.length}}人</div>
                <div class="weui-cell__ft" v-else></div>
            </a>
        </div>    
        <div class="section bg-color">
            <div class="mod-set">
                <div class="top">
                    <h2>排班方式</h2>
                    <ul class="tabs">
                        <li><a :class="{'current':fixedTime}" href="javascript:;" @click="fixedTimeTab">固定时间</a></li>
                        <li><a :class="{'current':elasticTime,'noborder':showpersonnelcheduling}"href="javascript:;" @click="elasticTimeTab">弹性时间</a></li>
                        <li><a :class="{'current':personnelScheduling}" href="javascript:;"  v-if="showpersonnelcheduling"  @click="personnelcheduling">人员排班</a></li>
                    </ul>
                </div>
                <p class="tip" v-if="fixedTime == true">固定上下班时间，每天可有多个工作时段</p>
                <p class="tip" v-if="elasticTime == true">不要求上下班时间，工作时间足够即算正常</p>
                <p class="tip" v-if="personnelScheduling == true">支持为不同人员排不同的工作时间</p>
            </div>
            <div class="weui-cells">
                <template v-if="fixedTime == true">
                    <a class="weui-cell weui-cell_access" href="javascript:;" @click="workTimeSet">
                        <div class="weui-cell__bd">
                            <p>考勤时间</p>
                        </div>
                        <div class="weui-cell__ft placeholder" v-if="taskObj.work_time_range.length">
                            <template v-for="time in taskObj.work_time_range">
                                <span v-if="time.cross == 1">{{time.start_time}}-次日{{time.end_time}}</span>
                                <span v-else>{{time.start_time}}-{{time.end_time}}</span>
                            </template>
                        </div> 
                        <div class="weui-cell__ft" v-else>
                            <span v-for="defaultTime in fixedTimeTxt">{{defaultTime.start_time}}-{{defaultTime.end_time}}</span>
                        </div>
                    </a>  
                </template>
                <template v-if="personnelScheduling == true">
                    <a class="weui-cell weui-cell_access" href="javascript:;" @click="classesSet">
                        <div class="weui-cell__bd">
                            <p>班次设置</p>
                        </div>
                        <div class="weui-cell__ft" v-if="taskObj.classes_info.length != 0">共有{{taskObj.classes_info.length}}个班次</div>
                        <div class="weui-cell__ft" v-else></div>
                    </a>  
                </template>
                <template v-if="elasticTime == true">
                    <a class="weui-cell weui-cell_access" href="javascript:;" @click="selectWorkTime">
                        <div class="weui-cell__bd">
                            <p>每天最短工作时间</p>
                        </div>
                        <div class="weui-cell__ft">{{taskObj.work_time_length}}小时</div>
                    </a>                       
                    <a class="weui-cell weui-cell_access weui-cell_active" href="javascript:;" @click="selectBeginTime">
                        <div class="weui-cell__bd">
                            <p>每天几点开始新一天的考勤</p>
                        </div>
                        <div class="weui-cell__ft middle_ft">{{today_begin}}</div>
                    </a>  
                    <div class="elastic_tips">之前打卡记为昨天打卡，之后打卡记为今天打卡</div>
                </template>
            </div>
        </div>
        <div class="section bg-color">
            <div class="weui-cells" v-if="!personnelScheduling">
                <a class="weui-cell weui-cell_access" href="javascript:;" @click="selectStartTime()">
                    <div class="weui-cell__bd">
                        <p>开始日期</p>
                    </div>
                    <div class="weui-cell__ft">{{work_week.start_date}}</div>
                </a>
                <a class="weui-cell weui-cell_access" href="javascript:;" @click="selectEndTime()">
                    <div class="weui-cell__bd">
                        <p>结束日期</p>
                    </div>
                    <div class="weui-cell__ft">{{work_week.end_date}}</div>
                </a>
                <div class="week-wrap com-border-top" id="weekList" v-if="work_week.start_date && work_week.end_date">
                    <p class="tip">请选择工作日：</p>
                    <ul class="week-list">
                        <li><span :class="{'selected':ischecked1}" @click="selectWeek('1')">周一</span></li>
                        <li><span :class="{'selected':ischecked2}" @click="selectWeek('2')">周二</span></li>
                        <li><span :class="{'selected':ischecked3}" @click="selectWeek('3')">周三</span></li>
                        <li><span :class="{'selected':ischecked4}" @click="selectWeek('4')">周四</span></li>
                        <li><span :class="{'selected':ischecked5}" @click="selectWeek('5')">周五</span></li>
                        <li><span :class="{'selected':ischecked6}" @click="selectWeek('6')">周六</span></li>
                        <li><span :class="{'selected':ischecked7}" @click="selectWeek('7')">周日</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="btn-box bg-color fixed" :style="isIphoneX?'padding-bottom: 35px;':''"><a href="javascript:;" class="weui-btn weui-btn_primary" @click="nextSubmit">下一步</a></div>
    </div>
        
</template> 

<script>
    let yearData = {
        data1: [],
    };
    let pageDate = {};
    let y = 2000
    while(y < 2100){
        yearData.data1.push(y + '')
        y++
    }

    let getInfoData = ''
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi.js'
    import InlineCalendar from 'components/inline-calendar'
    import KCApiApp from 'clientApi/KCApiApp.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
            InlineCalendar
        },
        data: function(){
            return{
                fixedTime:false, //固定时间显示--默认为显示
                elasticTime:false,  //弹性时间显示--默认不显示
                personnelScheduling:false,//人员排班
                daySetting:false, // 按天设置
                // weekSetting:false, // 按周设置
                showpersonnelcheduling:true,
                fixedTimeTxt:[
                    {
                        end_time:'18:00',
                        start_time:'09:00',
                        cross: 0
                    }
                ], //固定时间默认值
                taskObj:{
                    name:'', // 考勤名称
                    participant_group:'',//考勤小组
                    participant_group_name:'',  //考勤小组名称
                    participant_user:'',  // 考勤其他人员
                    // work_type:'',   // 0=固定时间 1=弹性时间
                    work_date_type:'',  // 0=按天设置  1=按周设置
                    work_date:'',
                    work_week:{},
                    work_time_range:[],  //固定时间设置
                    work_time_length:'8', //弹性时间默认值
                    classes_info: [],//班次设置
                },
                /*按天设置*/
                startDate:'',
                endDate:'',
                weeksData: ['日', '一', '二', '三', '四', '五', '六'],
                list:[],
                curDateValue: '',
                month: 0,
                year: 0,
                ourMonth: 0,
                ourYear: 0,
                /*按周设置*/
                work_week:{
                    start_date:'',
                    end_date:'',
                    week:[1,2,3,4,5,6,7]
                },
                ischecked1:true,
                ischecked2:true,
                ischecked3:true,
                ischecked4:true,
                ischecked5:true,
                ischecked6:true,
                ischecked7:true,
                classesType: 0,  //排班方式 0--固定时间   1--弹性时间   2--人员排班
                today_begin:'00:00',//弹性考勤开始时间
                today_begin_min:'',//弹性考勤开始时间（分钟）

            }
        },
        computed: {
            isIphoneX: function(){
                return util.isIphoneX()
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                cache.getCache('KqCacheMessge',(data)=>{
                    if(data){
                        pageDate.project_id = data.project_id || util.getUrddataString('project_id')
                        pageDate.team_id = data.team_id || util.getUrddataString('team_id')
                        pageDate.which_gback = data.which_gback || util.getUrddataString('which_gback')
                    }else{
                        pageDate.project_id = util.getUrddataString('project_id')
                        pageDate.team_id = util.getUrddataString('team_id')
                        pageDate.which_gback = util.getUrddataString('which_gback')

                    }
                    cache.deleteCache('getDate')
                })
               
                this.fixedTimeTab()
                // this.daySettingTab()

                let date = new Date()
                this.startDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                this.endDate = (date.getFullYear()+1)+"-"+(date.getMonth()+1)+"-"+date.getDate()
                

                let y = date.getFullYear()
                let m = date.getMonth() < 9 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
                let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
                let today = y + '-' + m + '-' + d

                //console.log(today)
                this.list.push(today)

                //开始日期默认为当前日期
                this.work_week.start_date = today

            },            
            //添加参与小组
            addGroup(){
                cache.setMemoryCache('participantGroup', this.taskObj.participant_group)
                window.location.href="dmsaas://KaoqinAddGroup"
            },
            //添加参与人员
            addMember(){
                cache.setMemoryCache('participantMember', this.taskObj.participant_user)
                let encodeStr = encodeURIComponent(`origin_type=kaoqin`)
                location.href = `dmsaas://KaoqinAddMember?urdData=${encodeStr}`
            },
            // 固定时间
            fixedTimeTab (){
                this.fixedTime = true
                this.elasticTime = false
                this.personnelScheduling = false;
                this.classesType = 0
            },
            // 弹性时间
            elasticTimeTab (){
                this.fixedTime = false
                this.personnelScheduling = false;
                this.elasticTime = true
                this.classesType = 1
            },
            //人员排班
            personnelcheduling (){
                this.fixedTime = false
                this.elasticTime = false,
                this.personnelScheduling = true;
                this.classesType = 2
            },
            // 弹性时间 -- 时间选择
            selectWorkTime(){
                let data = {
                    data1: []
                }
                let select = ['0']
                for(let i = 1 ; i<24.5 ; i+=0.5){
                    data.data1.push(i)
                }
                if(this.taskObj.work_time_length){
                    select[0]=data.data1.indexOf(Number(this.taskObj.work_time_length))+''
                }
                clientUi.showPicker(data, select, '工作时间(小时)', (returnData) => {
                    if(returnData.data1){
                        this.taskObj.work_time_length = data.data1[returnData.data1]
                    }else{
                        this.taskObj.work_time_length = this.taskObj.work_time_length
                    }
                    
                })
            },            
            // 弹性时间 -- 开始考勤的时间
            selectBeginTime(){
                let data = {
                    data1: []
                }
                let select = ['0']
                let time 
                                   
                for (let a = 0; a < 12 ; a++){
                    for (let b = 0; b<60; b+=30){
                        if(a<10){
                            time = '0' + a
                        }else{
                            time = a 
                        }
                        if(b==0){
                            time = time + ':' + '00'
                        }else{
                            time = time + ':' + '30'
                        }
                        b == 60 ? b=0 : b=b
                        data.data1.push(time)
                    }
                }
                data.data1.push('12:00')
                if(this.today_begin){
                    select[0]=data.data1.indexOf(this.today_begin)+''
                }
                clientUi.showPicker(data, select, '请选择时间', (returnData) => {
                    if(returnData.data1){
                        this.today_begin = data.data1[returnData.data1]
                    }else{
                        this.today_begin = this.today_begin
                    }
                    let begin_data = this.today_begin.split(':')
                    let begin_data_hour = parseInt(begin_data[0])
                    let begin_data_min = parseInt(begin_data[1])
                    this.today_begin_min = begin_data_hour*60 + begin_data_min
                    
                })
            },
            classesSet(){
                window.location.href = "dmsaas://KaoqinClassesSet"
            },
            // 按天设置
            // daySettingTab (){
            //     this.daySetting = true
            //     this.weekSetting = false

            // },
            // 按周设置
            // weekSettingTab (){
            //     this.daySetting = false
            //     this.weekSetting = true
            // },
            //工作时间段设置
            workTimeSet(){
                if(this.taskObj.work_time_range.length){
                    cache.setMemoryCache('workTimeRange', this.taskObj.work_time_range)
                }else{
                    cache.setMemoryCache('workTimeRange', this.fixedTimeTxt)
                }
                window.location.href = "dmsaas://KaoqinFixedTime"
                
            },
            updateDate(data){
                commonPage.getWebViewID((data)=>{
                    console.log(data)
                    cache.setMemoryCache('webViewID',{'webViewID':data})
                })
                if(data){
                    let key = data.key
                    let value = data.value
                    switch(key){
                        case 'participantMember':
                            //更新参与人员信息
                            this.taskObj.participant_user = value
                            break 
                        case 'participantGroup':
                            //更新参与小组信息
                            this.taskObj.participant_group = value
                            this.taskObj.participant_group_name = data.name
                            break
                        case 'participantMember':
                            //更新参与人员信息
                            this.taskObj.participant_user = value
                            break
                        case 'KaoqinClassesSet':
                            this.taskObj.classes_info = value
                            console.log("更新班次设置"+JSON.stringify(this.taskObj.classes_info))
                            //更新班次设置
                            break
                        case 'workTimeRange':
                            this.taskObj.work_time_range=value
                            //工作时间段设置
                            break

                        default:
                            break
                    }
                }
            },
            
            //下一步
            nextSubmit (){
                if(!this.checkDate()){
                    return
                }
                // 判断当前选择排班方式为固定时间还是弹性时间，固定时间为0，弹性时间为1
                this.taskObj.work_type = this.fixedTime == true ? 0 : 1  
                // 判断当前选择考勤日期为按天设置还是按周设置，按天设置为0，按周设置为1
                this.taskObj.work_date_type = this.daySetting == true ? 0 : 1
                let data = {
                    team_id:pageDate.team_id,
                    project_id:pageDate.project_id,
                    which_gback:pageDate.which_gback,
                    name:this.taskObj.name,
                    participant_group:this.taskObj.participant_group,
                    participant_user:this.taskObj.participant_user,
                    work_type:this.classesType, //排班方式
                    work_time_range:this.taskObj.work_time_range.length==0?this.fixedTimeTxt:this.taskObj.work_time_range,  // 固定时间
                    work_time_length:this.taskObj.work_time_length,  // 弹性时间
                    work_date_type:1,   // 考勤日期方式
                    work_date:this.list,   // 按天设置
                    work_week:this.work_week,   //按周设置
                    schedule_list:this.taskObj.classes_info,          //班次列表
                    today_begin: this.today_begin_min    // 弹性考勤开始时间
                    //position:this.taskObj.position,
                    //require_field:this.taskObj.require_field,
                    //notice_type:this.taskObj.notice_type,
                    //task_id:taskId,
                    // photoImg:this.taskObj.photoImg
                    // adjust_distance:this.taskObj.adjust_distance == '关闭' ? 0 : this.taskObj.adjust_distance
                }                
                console.log(data)
                cache.setCache('taskObjInfo', data, 60*60*24)
                let url = `classes_type=${this.classesType}`
                window.location.href="dmsaas://KaoqinSettingTimes?urdData="+encodeURIComponent(url) 
            },
/***********************************************按天设置**************************************/
            setMonth() {
                let data = {
                    data1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                }
                let i = data.data1.indexOf($('.calendar-month-txt.calendar-title').html())
                let select = [i]
                clientUi.showPicker(data, select, '选择月份', (res) => {
                    console.log(res)
                    if(res.data1){
                        this.ourMonth = parseInt(res.data1)
                    }else{
                        this.ourMonth = this.ourMonth
                    }
                    
                })
            },
            setYear() {
                let i = yearData.data1.indexOf($('.calendar-year-txt.calendar-title').html())
                let select = [i]
                clientUi.showPicker(yearData, select, '选择年份', (res) => {
                    if(res.data1){
                        this.ourYear = parseInt(yearData.data1[res.data1])
                    }else{
                        this.ourYear = this.ourYear
                    }
                    
                })
            },

/****************************************按周设置**********************************************/
            selectStartTime(){
                var self = this;
                let date = new Date()
                let currentDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                let maxDate = this.work_week.end_date?this.work_week.end_date:'3000-12-12'
                KCApiApp.showDatePicker(
                        currentDate,//  最小时间
                        maxDate,//  最大时间
                        self.work_week.start_date, //默认时间
                        (data)=>{
                            self.work_week.start_date = data.SelectedDate
                        })
            },
            selectEndTime(){
                var self = this;
                let date = new Date()
                let currentDate = this.work_week.start_date
                let maxDate = (date.getFullYear()+1)+"-"+(date.getMonth()+1)+"-"+date.getDate()
                KCApiApp.showDatePicker(
                        currentDate,//  最小时间
                        maxDate,//  最大时间
                        this.work_week.end_date, //默认时间
                        (data)=>{                  //回调方法
                            this.work_week.end_date = data.SelectedDate
                        })
            },
            selectWeek (way){
                switch(way){ 
                    case '1':
                        if(this.ischecked1 == true){
                            this.ischecked1 = false
                            this.work_week.week.pop('1')
                        }else{
                            this.ischecked1 = true
                            this.work_week.week.push('1')
                        }
                        break
                    case '2':
                        if(this.ischecked2 == true){
                            this.ischecked2 = false
                            this.work_week.week.pop('2')
                        }else{
                            this.ischecked2 = true
                            this.work_week.week.push('2')
                        }
                        break
                    case '3':
                        if(this.ischecked3 == true){
                            this.ischecked3 = false
                            this.work_week.week.pop('3')
                        }else{
                            this.ischecked3 = true
                            this.work_week.week.push('3')
                        }
                        break
                    case '4':
                        if(this.ischecked4 == true){
                            this.ischecked4 = false
                            this.work_week.week.pop('4')
                        }else{
                            this.ischecked4 = true
                            this.work_week.week.push('4')
                        }
                        break
                    case '5':
                        if(this.ischecked5 == true){
                            this.ischecked5 = false
                            this.work_week.week.pop('5')
                        }else{
                            this.ischecked5 = true
                            this.work_week.week.push('5')
                        }
                        break
                    case '6':
                        if(this.ischecked6 == true){
                            this.ischecked6 = false
                            this.work_week.week.pop('6')
                        }else{
                            this.ischecked6 = true
                            this.work_week.week.push('6')
                        }
                        break
                    case '7':
                        if(this.ischecked7 == true){
                            this.ischecked7 = false
                            this.work_week.week.pop('7')
                        }else{
                            this.ischecked7 = true
                            this.work_week.week.push('7')
                        }
                        break
                    default:
                        break
                }
            },
            // 验证必填项，为空时，提示
            checkDate (){
                if(!this.taskObj.name){
                    widget.toast('请输入考勤名称')
                    return false
                }
                // if(!this.taskObj.participant_group.length&&!this.taskObj.participant_user.length){
                //     widget.toast('请添加参与小组或参与人员')
                //     return false
                // }
                if(this.classesType == 1 || this.classesType == 0){
                    if(!this.work_week.start_date){
                        widget.toast('请选择考勤任务开始日期')
                        return false
                    }
                    if(!this.work_week.end_date){
                        widget.toast('请选择考勤任务结束日期')
                        return false
                    } 
                    if(this.work_week.week.length == 0){
                        widget.toast('请设置日期和工作日')
                        return false
                    }
                }
                if(this.personnelScheduling){
                    if(this.taskObj.classes_info.length == 0){
                        widget.toast('请设置班次')
                        return false
                    }
                }
                
                // if(this.taskObj.require_field.photo == 0 && this.taskObj.require_field.position == 0 && this.taskObj.require_field.remark == 0){
                //     widget.toast('请选择必填项')
                //     return false
                // }
                return true
            },
            dowatch(){
                if(this.taskObj.name || this.taskObj.participant_group_name || this.taskObj.participant_user.length){
                    clientUi.showDialog('提醒', '考勤任务已填写，确认是否要放弃？', function(data){
                        if(data.status == 1){
                            cache.deleteCache('KaoqinClassesSet')
                            cache.deleteMemoryCache('KaoqinAddPosition')
                            commonPage.goBack(1)
                        }else{
                            console.log(7)
                        }
                    },'是','否')
                }else{
                    cache.deleteCache('KaoqinClassesSet')
                    cache.deleteMemoryCache('KaoqinAddPosition')
                    commonPage.goBack(1)
                }
            }

        },
        created(){
            // 获取上一页考勤设置填写的信息
            cache.getCache('taskObjInfo', (data) => {
                getInfoData = data
            })
            commonPage.getWebViewID((data)=>{
                console.log(data)
                cache.setMemoryCache('webViewID',{'webViewID':data})
            })
            commonPage.updateTitleBar({
                backAction: 'goBack',
                leftAction: 'goBack'
            })
            window.goBack = () => {
                this.dowatch()
            }
            this.init();
            window.loadData = this.updateDate
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<!-- <style src="../../static/css/calendar.css"></style> -->
<style>
    /*!
 * Vux v0.1.3 (https://vux.li)
 * Licensed under the MIT license
 */
    .vux-next-icon,.vux-prev-icon{position:absolute;left:0;top:15px;display:inline-block;width:12px;height:12px;border:1px solid #04be02;border-radius:0;border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-left:15px;line-height:40px}.vux-next-icon{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);left:auto;top:14px;right:15px}.vux-prev-icon:before{display:block;width:12px;height:12px;border:1px solid #04be02;border-width:1px 0 0 1px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.is-weekend-highlight td.is-week-0,.is-weekend-highlight td.is-week-6,.is-weekend-highlight td.is-week-list-0,.is-weekend-highlight td.is-week-list-6{color:#e59313}.inline-calendar a{text-decoration:none;tap-highlight-color:transparent}.calendar-month,.calendar-year{position:relative}.calendar-header{line-height:40px;font-size:1.2em;overflow:hidden}.calendar-header>div{float:left;width:50%;text-align:center;overflow:hidden}.calendar-header a:last-of-type{float:right;vertical-align:bottom}.calendar-title,.switch-btn{display:inline-block;border-radius:4px;line-height:30px}.switch-btn{width:30px;margin:5px;color:#39b5b8;font-family:SimSun}.calendar-title{padding:0 6%;color:#333}.calendar-header a.active,.calendar-title:active,.switch-btn:active{background-color:#39b5b8;color:#fff}.calendar-week{overflow:hidden}.calendar-week span{float:left;width:14.28%;font-size:1.6em;line-height:34px;text-align:center}.inline-calendar{width:100%;background:#fff;border-radius:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.inline-calendar td.is-today,.inline-calendar td.is-today.is-disabled{color:#04be02}.calendar-enter,.calendar-leave{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.calendar:before{top:-10px;border-bottom-color:#dedede}.calendar:after,.calendar:before{position:absolute;left:30px;content:"";border:5px solid transparent}.calendar:after{top:-9px;border-bottom-color:#fff}.calendar-tools{height:32px;font-size:20px;line-height:32px;color:#04be02}.calendar-tools .float.left{float:left}.calendar-tools .float.right{float:right}.calendar-tools input{font-size:20px;line-height:32px;color:#04be02;width:70px;text-align:center;border:none;background-color:transparent}.calendar-tools>i{margin:0 16px;line-height:32px;cursor:pointer;color:#707070}.calendar-tools>i:hover{color:#5e7a88}.inline-calendar table{clear:both;width:100%;border-collapse:collapse;color:#444}.inline-calendar td{padding:5px 0;text-align:center;vertical-align:middle;font-size:16px;position:relative}.inline-calendar td.is-disabled,.inline-calendar td.week{pointer-events:none!important;cursor:default!important}.inline-calendar td.is-disabled{color:silver}.inline-calendar td>span{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center}.vux-calendar-range.inline-calendar td.current{background-color:#04be02}.vux-calendar-range table{margin-bottom:10px}.inline-calendar td.current>span{background-color:#04be02;color:#fff}.inline-calendar .timer{margin:10px 0;text-align:center}.inline-calendar .timer input{border-radius:2px;padding:5px;font-size:14px;line-height:18px;color:#5e7a88;width:50px;text-align:center;border:1px solid #efefef}.inline-calendar .timer input:focus{border:1px solid #5e7a88}.calendar-button{text-align:center}.calendar-button button{border:none;cursor:pointer;display:inline-block;min-height:1em;min-width:8em;vertical-align:baseline;background:#5e7a88;color:#fff;margin:0 .25em 0 0;padding:.8em 2.5em;font-size:1em;line-height:1em;text-align:center;border-radius:.3em}.calendar-button button.cancel{background:#efefef;color:#666}.vux-popup{border-top:2px solid #04be02}.vux-popup-dialog{position:fixed;left:0;bottom:0;width:100%;background:#eee;z-index:101;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s}.vux-popup-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;tap-highlight-color:transparent;z-index:-1}.vux-popup-mask.vux-popup-show{opacity:1;z-index:100;-webkit-transition:opacity .3s;transition:opacity .3s}.vux-popup-enter,.vux-popup-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.vux-tap-active{tap-highlight-color:transparent}.vux-tap-active:active{background-color:#ececec}.weui_cell{position:relative}.weui_cell:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #d9d9d9;color:#d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.weui_cell:first-child:before{display:none}.weui_cells{margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px;overflow:hidden;position:relative}.weui_cells:before{top:0;border-top:1px solid #d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0}.weui_cells:after,.weui_cells:before{content:" ";position:absolute;left:0;width:100%;height:1px;color:#d9d9d9;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui_cells:after{bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:0 100%;transform-origin:0 100%}.weui_cells_title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#888;font-size:14px}.weui_cells_title+.weui_cells{margin-top:0}.weui_cells_tips{margin-top:.3em;color:#888;padding-left:15px;padding-right:15px;font-size:14px}.weui_cell{padding:10px 15px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.weui_cell_ft{text-align:right;color:#888}.weui_cell_primary{-webkit-box-flex:1;-ms-flex:1;flex:1}.weui_cell_bd>p{color:#000}.weui_cell_ft.with_arrow:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;position:relative;top:-1px;margin-left:.3em}.vux-label-desc{font-size:14px;color:#666}
</style>
<!-- <style src="../../static/css/common.css"></style> -->
<style>
    html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;   
    font-size: 14px;
    background: #f2f2f2;
    color: #333;
}
html, body {
    height: 100%;
}
input, textarea, select, button {
    font-size: 16px;
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
}
textarea {
    resize: none;
}
::-webkit-input-placeholder {
    color: #ccc;
}
ol, ul {
    list-style: none;
}
a {
    color: #333;
}
em {
    font-style: normal;
}
.page {
    overflow: hidden;
    min-height: 100%;
    box-sizing: border-box;
}
.page.show-navbar {
    padding-top: 40px;
}
.page.show-tabbar {
    padding-bottom: 44px;
}
.page.show-footerBtn {
    padding-bottom: 64px;
}
.red-dot {
    display: inline-block;
    min-width: 18px;    
    height: 18px;   
    line-height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    background: #f40;
    font-size: 12px;
    color: #fff;
    border-radius: 9px;
}
.touch {
    background: #fff;
}
.touch:active {
    background: #fafafa !important;
}
.mod-btn-box {
    padding: 30px 20px;
}
.link-access {
    position: relative;
}
.link-access::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 12px;
    top: 50%;
    margin: -4px 2px 0 0;
}
.bg_sprite, .hierarchy::before, .btn_add::before {
    display: inline-block;
    background-image: url(../../static/imgs/sprite.png);
    background-repeat: no-repeat;
    -webkit-background-size: 250px auto;
    background-size: 250px auto;
}
.bg-color {
    background: #fff !important;
}
.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

/* reset weui */
.weui-cells__title {
    color: #bbb;
    margin: 0;
    line-height: 20px;
    padding: 14px 12px 6px;
}
.weui-cells__title span {
    margin-right: 14px;
}
.weui-cells {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;   
}
.searchbar + .weui-cells {
    margin-top: -1px;
}
.weui-cells:before, .weui-cells:after, .weui-cell:before, .weui-actionsheet__cell:before {
    border-color: #e5e5e5;
}
.weui-cell {
    padding: 12px;
}
.weui-cell:before {
    left: 12px;
}
.weui-cells_form .weui-cell__ft {
    line-height: 0;
}
.weui-cells_checkbox .weui-cell:before {
    left: 47px;
}
.weui-cell_select {
    padding: 0;
}
.weui-cell_select-after {
    padding-left: 12px;
}
.weui-select {
    height: 48px;
    line-height: 48px;
}
.weui-cell_select .weui-cell__bd:after {
    right: 12px;
}
.weui-cell_access:active, .weui-actionsheet__cell:active, .weui-dialog__btn:active, .weui-cells_checkbox .weui-cell:active {
    background-color: #fafafa;
}
.weui-cell__bd {
    overflow: hidden;
}
.weui-cell__bd p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weui-cell__bd .title, .weui-label {
    color: #999;
    display: inline-block;
    width: auto;
    min-width: 64px;
    margin-right: 18px;
}
.weui-cell__bd .placeholder {
    color: #ccc;
}
.weui-input {
    height: 1.5em;
    line-height: 1.5;
}
.weui-btn {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    border-radius: 2px;
}
.weui-btn_primary {
    background-color: #fa0;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
    background-color: #f90;
}
.weui-btn_disabled.weui-btn_primary {
    background-color: rgba(255, 170, 0, 0.4);
}
.weui-btn_disabled.weui-btn_primary.fixed {
    background: #fd9;
}
.weui-btn_primary:after, .weui-btn_warn:after {
    display: none;
}
.weui-btn.fixed {
    position: fixed;
    z-index: 99;
    width: 100%;
    border-radius: 0;
    left: 0;
    bottom: 0;
}
.weui-btn.fixed::after {
    display: none;
}
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before, .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    color: #fa0;
}
.weui-tabbar {
    position: fixed;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #fa0;
}
.weui-search-bar__cancel-btn {
    color: #333;
    font-size: 16px;
}
.weui-cell_switch {
    padding: 8px 12px;
}
.weui-switch:checked {
    background-color: #fa0;
    border-color: #fa0;
}
.weui-mask {
    background: rgba(0, 0, 0, 0.5);
}
.weui-dialog__hd {
    font-size: 18px;
    line-height: 24px;
    padding: 25px 18px 10px;
}
.weui-dialog__bd {
    font-size: 16px;
    line-height: 22px;
    min-height: 0;
    padding: 0 18px 15px;
}
.weui-dialog__bd:first-child {
    padding: 25px 18px 15px;
    color: #999;
}
.weui-cell__ft {
    color: #bbb;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    min-height: 24px;
    box-sizing: border-box; 
}
.weui-cell__ft span {
    margin-right: 10px;
}
.weui-cell__ft span:last-child {
    margin-right: 0;
}
.weui-dialog__ft:after, .weui-dialog__btn:after {
    border-color: #e5e5e5;
}
.weui-dialog__btn_default {
    color: #999;
}
.weui-dialog__btn_primary {
    color: #333;
}
.searchbar {
    position: relative;
}
.weui-search-bar {
    background-color: #f2f2f2;
}
.weui-search-bar::before, .weui-search-bar::after {
    border-color: #e5e5e5;
}
.weui-search-bar__label, .weui-icon-search {
    color: #ccc;
}
.weui-search-bar__label {
    line-height: 26px;
}
.searchbar-result {
    width: 100%;
    font-size: 14px;
    margin-top: 0;
    position: absolute !important;
    left: 0;
    top: 44px;
    z-index: 10;
}
.searchbar-result .keyword {
    color: #fa0;
}
.weui-cells_checkbox .weui-cell__hd {
    padding-right: 0;
}
[class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
    margin: 0 12px 0 0;
}
.weui-icon-search:before, .weui-icon-clear:before, .weui-cells_radio .weui-icon-checked::before {
    margin: 0;
}
.weui-textarea-counter {
    font-size: 14px;
    color: #999;
}
/* .weui-textarea-counter span {
    color: #535353;
} */

/* mod-tabs */
.mod-tabs {
    display: -webkit-box;
    display: flex;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(234, 233, 233, 0.5);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.mod-tabs li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
}
.mod-tabs a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: rgba(153, 153, 153, 0.9);
}
.mod-tabs a.current {
    color: rgb(102, 102, 102);
    box-shadow: 0 -2px 0 rgb(255, 187, 0) inset;
    font-weight: bold;
}

/* border */
[class*="com-border-"] {
    position: relative;
    overflow: hidden;
}
.com-border-top::before, .com-border-bottom::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(229, 229, 229);   
    left: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);  
    z-index: 9;
}
.com-border-top::before {
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.com-border-bottom::after {
    bottom: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.com-border-outside::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 0;
    top: 0;
}
[class*="com-border-"].ml::before, [class*="com-border-"].ml::after {
    left: 12px;
}

/* upload pic */
.upload-pic {
    background: #fff;
    padding: 15px 0 8px 12px;
    overflow: hidden;
    position: relative;
}
.upload-pic h2 {    
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #999;
    margin-bottom: 20px;
}
.upload-pic .pic-list {
    overflow: visible;
}
.upload-pic .pic-list li {
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
}
.upload-pic .pic-list img {
    display: block;
    width: 60px;
    height: 60px;
}
.upload-pic .btn-delete {
    width: 18px;
    height: 18px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.upload-pic .btn-delete::before, .upload-pic .btn-delete::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
    left: 50%;
    top: 50%;
}
.upload-pic .btn-delete::before {
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
}
.upload-pic .btn-delete::after {
    width: 2px;
    height: 10px;
    margin: -5px 0 0 -1px;
}
.uploader {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
    background: #fff;
}
.uploader.disabled {
    opacity: 0.4;
}
.uploader input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    outline: none;
    opacity: 0;
}
.uploader div::before, .uploader div::after {
    content: "";
    position: absolute;
    background: rgb(204, 204, 204);
    left: 50%;
    top: 50%;
    border-radius: 2px;
}
.uploader div::before {
    width: 28px;
    height: 2px;
    margin: -1px 0 0 -14px;
}
.uploader div::after {
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
}
.uploader::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* calendar */
.inline-calendar {
    overflow: hidden;
}
.inline-calendar table {
    color: #333;
    margin-bottom: 5px;
}
.calendar-header {
    font-size: 16px;
    line-height: normal;
    text-align: center;
}
.calendar-header > div {
    line-height: 22px;
    padding: 16px 22px 6px;
    float: none;
    width: auto;
    display: inline-block;
    position: relative;
    margin: 0 10px;
}
.calendar-title {
    line-height: inherit;
    padding: 0 20px;    
}
.calendar-title:active {
    background: transparent;
    color: #333;
}
.vux-prev-icon, .vux-next-icon {
    width: 22px;
    height: 22px;
    border: none;   
    margin: 0;
    -webkit-transform: none;
    transform: none;
    top: 16px;  
}
.vux-next-icon {
    right: 0;
}
.vux-prev-icon::after, .vux-next-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fa0;
    left: 50%;
    top: 50%;
    margin-top: -4px;
}
.vux-prev-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -3px;
}
.vux-next-icon::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: -6px;
}
.inline-calendar th {
    font-size: 12px;
    color: #ccc;
    padding: 5px 0;
}
.inline-calendar td {
    font-size: 14px;
}
.inline-calendar td > span {
    width: 27px;
    height: 27px;
    line-height: 27px;  
}
.inline-calendar td.is-today, .inline-calendar td.is-today.is-disabled {
    color: #fa0;
}
.inline-calendar td.current > span, .inline-calendar td.selected > span {   
    background-color: rgba(255, 170, 0, 0.1);
    color: #333;
    position: relative;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after, .inline-calendar td::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.inline-calendar td.green::after, .inline-calendar td::after {
    width: 5px;
    height: 5px;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.inline-calendar td.green::after {
    background: #89c16c;
}
.inline-calendar td.red::after {
    background: #f38355;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after { 
    width: 200%;
    height: 200%;
    border: 1px solid #fa0;
    box-sizing: border-box; 
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.inline-calendar td.current::after {
    display: none;
}

/* tabbar */
.tabbar {
    width: 100%;    
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}
.tabbar ul {
    display: -webkit-box;
    display: flex;
}
.tabbar li {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
}
.tabbar a {
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #aaa;
}
.tabbar li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 22px;
    background: #e5e5e5;
    -webkit-transform: scale3d(0.5, 1, 1);
    transform: scale3d(0.5, 1, 1);
    right: 0;
    top: 11px;
}
.tabbar li:last-child::after {
    display: none;
}
.tabbar .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: rgb(221, 222, 226);
    margin-right: 8px;
}
.tabbar a span {
    vertical-align: middle;
}
.tabbar .current .icon {
    background-color: rgb(255, 170, 0);
}
.tabbar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);
}

/* toast */
.mod-toast {
    width: 100%;
    padding: 0 75px;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 9999;
}
.mod-toast p {
    display: inline-block;
    background: rgba(17, 17, 17, 0.7);
    padding: 32px 24px; 
    font-size: 16px;
    line-height: 22px;  
    color: #fff;
    border-radius: 5px;
}

/* button */
[class*="mod-btn-s-"] {
    display: inline-block;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 2px;
    position: relative;
}
[class*="mod-btn-s-"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mod-btn-s-1 {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.mod-btn-s-1::after, .mod-btn-s-3.selected::after {
    display: none;
}
.mod-btn-s-1:active {
    background: rgb(255, 153, 0);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-1.disabled {
    background: rgba(255, 170, 0, 0.4);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-2 {
    background: rgb(248, 248, 248);
    color: rgb(53, 53, 53);
}
.mod-btn-s-2::after {
    border-color: rgba(5, 5, 5, 0.1);
}
.mod-btn-s-2:active {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(53, 53, 53, 0.6);
}
.mod-btn-s-3 {  
    color: rgb(255, 170, 0);
}
.mod-btn-s-3::after {
    border-color: rgb(255, 170, 0);
}
.mod-btn-s-3:active {   
    color: #fc6;
}
.mod-btn-s-3:active::after {
    color: #fc6;
}
.mod-btn-s-3.disabled {
    color: rgb(204, 204, 204);
}
.mod-btn-s-3.disabled::after {
    border-color: rgb(204, 204, 204);
}
.mod-btn-s-3.selected {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.btn-box.fixed {
    padding: 9px 10px 10px;
    border-top: 1px solid #e6e6e6;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    z-index: 99;
}

/* empty */
.mod-empty {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    margin-top: -30px;
}
.mod-empty .icon {
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.mod-empty .icon_1 {    
    background-image: url(../../static/imgs/icons/icon_1.png);
}
.mod-empty .icon_2 {    
    background-image: url(../../static/imgs/icons/icon_2.png);
}
.mod-empty .icon_3 {    
    background-image: url(../../static/imgs/icons/icon_3.png);
}
.mod-empty .icon_4 {    
    background-image: url(../../static/imgs/icons/icon_4.png);
}
.mod-empty .tip {   
    color: #999;
    font-size: 16px;
    line-height: 22px;
}
.mod-empty .tip_2 {
    font-size: 12px;
    line-height: 16px;
    color: #ccc;
    margin-top: 10px;
}
.mod-empty .weui-btn {
    width: 150px;
    margin-top: 35px;
}

/* crumbs nav */
.mod-crumbs {
    height: 44px;
    line-height: 44px;
    padding-left: 16px;
    background: #fafafa;
    color: #bbb;
}
.mod-crumbs .arrow {
    margin: 0 8px;
    font-family: "Simsun";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #bbb;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    text-indent: -9999px;
}
.mod-crumbs a {
    color: #f09835;
}
.mod-crumbs a, .mod-crumbs span {
    vertical-align: middle;
}

/* avatar box */
.avatar-box {
    float: left;    
    position: relative;
}
.avatar-box .cover {    
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    left: 0;
    top: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

</style>
<!-- <style src="../../static/css/attendance-set.css"></style> -->
<style>
.weui-label {
    color: #333;
}
.weui-cell__bd .tip {
    color: #aaa;
    font-size: 13px;
    margin-left: 4px;
}
.block {
    display: block;
}
.add-team {
    overflow: hidden;
    padding: 0 0 6px 12px;
}
.add-team .team {
    float: left;
    height: 36px;
    line-height: 36px;
    padding: 0 6px;
    background: rgba(255, 190, 106, 0.1);
    border-radius: 2px;
    font-size: 14px;
    color: #fa0;    
    margin: 0 10px 12px 0;
}
.add-team .button {
    float: left;
    width: 36px;
    height: 36px;
    /* border: 1px solid rgba(255, 170, 0, 0.7); */
    border: 1px solid #bbb;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 12px;
}
.add-team .button::before, .add-team .button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* background: #fa0; */
    background: #bbb;
}
.add-team .button::before {
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
}
.add-team .button::after {
    width: 2px;
    height: 16px;
    margin: -8px 0 0 -1px;
}
.attendance-set .btn_add {
    display: block;
    height: 48px;
    line-height: 48px;
    color: #fa0;
    text-align: center;
}
.attendance-set .btn_add::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: -63px -23px;
    margin-right: 6px;
    vertical-align: middle;
}
.attendance-set .btn_add span {
    vertical-align: middle;
}
.weui-cell_access .weui-cell__ft.down:after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.weui-cell_access .weui-cell__ft.up:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.page.show-footerBtn {
    padding-bottom: 76px;
}
.item-content { 
    margin-top: -1px;   
}
.item-content li {
    padding: 12px 40px 12px 30px;
    background: #fff;
}
.item-content h3 {
    color: #888;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 4px;
}
.item-content p {
    color: #bbb;
    line-height: 22px;  
}
.item-content h3, .item-content p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-content li:not(:last-child)::after {
    left: 30px;
}
.item-content .icon_location {
    position: absolute;
    width: 11px;
    height: 14px;
    background-position: -17px -513px;
    left: 12px;
    top: 16px;
}
.item-content .btn_delete {
    position: absolute;
    width: 18px;
    height: 18px;
    background-position: -46px 0;
    right: 12px;
    top: 50%;
    margin-top: -9px;
}
.weui-cells.sub-option {
    margin-top: 0;  
}
.weui-cells.sub-option .weui-cell {
    padding-left: 30px;
}
.weui-cells.sub-option .weui-cell::before {
    left: 30px;
}
.weui-cells.sub-option::before {
    display: none;
}
.weui-cells.option-set::after {
    left: 12px;
}
.attendance-set .section {
    margin-top: 12px;
}
.mod-set {
    padding: 16px 12px;
}
.mod-set .top {
    overflow: hidden;
    margin-bottom: 20px;
}
.mod-set h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    line-height: 30px;
}
.mod-set .tabs {
    float: right;
}
.mod-set .tabs li {
    float: left;
}
.mod-set .tabs a {
    float: left;
    width: 66px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #fa0;
    color: #fa0;
}
.mod-set .tabs .current {
    background: #fa0;
    color: #fff;
}
.mod-set .tip {
    font-size: 13px;
    line-height: 18px;
    text-align: right;
    color: #aaa;
}
.mod-set + .weui-cells, .title-bar + .weui-cells {
    margin-top: 0;
}
.week-wrap {
    padding-top: 15px;
}
.week-wrap .tip {
    font-size: 13px;
    color: #aaa;
    padding-left: 12px;
}
.week-list {
    padding: 18px 6px 3px;
    overflow: hidden;
}
.week-list li {
    float: left;
    width: 20%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.week-list span {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #f6f6f6;
    border-radius: 1px;
    text-align: center;
    font-size: 14px;
    color: #888;
    position: relative;
}
.week-wrap::before {
    left: 12px;
}
.week-list .selected::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: url(../../static/imgs/icon_selected.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    right: 0;
    top: 0;
}
.title-bar {
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
}
.title-bar h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    color: rgb(189, 192, 199);
}
.title-bar .btn_delete {
    position: absolute;
    width: 22px;
    height: 22px;
    background-position: 5px -627px;
    right: 10px;
    top: 13px;
}
.section + .btn_add {
    margin-top: 12px;
}
.weui-check__label + .upload-pic {
    padding: 8px 0 6px 47px;
    overflow: visible;
}
.mod-set .tabs .noborder{
    border-right: 0;
    border-left: 0;
}
.placeholder{
    padding-right: 22px!important;
}
.elastic_tips{
    font-size: 12px;
    color: #999999;
    margin-left: 12px;
    margin-bottom: 16px;
    margin-top: -10px;
}
.weui-cell_active:active {
    background:none!important;
}
.middle_ft{
    position: relative;
    top: 12px;
}
</style>





